<!--
 * @Description  : 
 * @Author       : jiangxiaoying
 * @Date         : 2021-03-30 15:13:04
 * @LastEditTime : 2021-04-07 16:26:04
 * @LastEditors  : jiangxiaoying
 * @FilePath     : \cloud-components\docs\pages\components\cloud-transfer-list\example8.vue
-->
<template>
  <div class="transfer-box">
    <div>
      <CloudTransferList
        v-cloudLoading="{ show: transferLoading }"
        :showSelectAll="false"
        placeholder="请输入姓名搜索"
        :isCustomTransfer="true"
        :isMultiple="false"
        :sourceList="sourceList"
        :targetList="targetList"
        @change="handleChange"
        @search="handleSearch"
      >
      </CloudTransferList>
    </div>
    <div style="margin-top: 10px; margin-bottom: 10px">
      <CloudTransferList
        v-cloudLoading="{ show: transferLoading }"
        :showSelectAll="false"
        placeholder="请输入姓名搜索"
        :isCustomTransfer="true"
        :isMultiple="false"
        :sourceList="sourceList1"
        :targetList="targetList1"
        @change="handleChange"
        @search="handleSearch"
      >
      </CloudTransferList>
    </div>
    <CloudButton type="primary" @click="btnClick">点我改变数据</CloudButton>
  </div>
</template>

<script>
import reqwest from 'reqwest';
export default {
  title: '8.自定义穿梭框单选(isCustomTransfer=true,isMultiple=true)',
  subTitle: '自定义穿梭框单选',
  data() {
    return {
      transferLoading: false,
      sourceList: [],
      targetList: [],
      sourceList1: [],
      targetList1: []
    }
  },
  methods: {
    handleChange(targetKeys, direction, moveKeys, data) {
      //console.log(targetKeys, direction, moveKeys, data);
    },

    handleSearch(val, $event, props) {
      //console.log('search:', val, $event, props);
    },
    btnClick() {
      this.transferLoading = true
      reqwest({
        url: 'http://172.31.15.10:53000/mock/95/designSpace/space/invite/queryMembers/single',
        method: 'get',
        processData: false,
        success: (res) => {
          this.transferLoading = false
          // this.sourceList1 = res.data
          this.sourceList1 = []
          this.targetList1 = []
        },
      });
    },

    initData() {
      this.transferLoading = true
      reqwest({
        url: 'http://172.31.15.10:53000/mock/95/designSpace/space/invite/queryMembers/single',
        method: 'get',
        processData: false,
        data: {
          id: '000',
          key: '000'
        },
        success: (res) => {
          this.transferLoading = false
          this.sourceList = res.data.map(item => {
            return {
              ...item,
              checked: false
            }
          })
          this.sourceList1 = res.data.map(item => {
            return {
              ...item,
              checked: false
            }
          })
          //this.sourceList1[0].checked = true
          this.targetList1 = [{
            id: '5665',
            title: '测试',
            checked: true
          }]
          console.log('this.sourceList000', this.sourceList)
        },
      });
    }
  },
  mounted() {
    this.initData()
  }
}
</script>

<style lang="scss">
.transfer-box {
  width: 660px;
  height: auto;
  padding: 20px;
}
</style>